<template>
  <div>
    <div ref="iframe-box"></div>
    <el-button @click="appendIframe">append iframe</el-button>
    <el-button @click="getIframeCtx">Get context</el-button>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class Sun extends Vue {
  private name: string = 'Sun'
  private title: string = 'g2'
  private appendIframe() {
    const iframeBox: any = this.$refs['iframe-box']
    const iframeEl = document.createElement('iframe')
    iframeEl.src = 'www.baidu.com'
    iframeEl.width = '100%'
    iframeEl.height = '500px'
    iframeEl.id = 'iframe_test'
    iframeBox.appendChild(iframeEl)
  }
  private getIframeCtx() {
    const el: any = document.querySelector('#iframe_test')
    const scriptEl = document.createElement('script')
    scriptEl.type = 'text/javascript'
    scriptEl.text = 'document.querySelector(".el-menu-demo > li").click()'
    const ctx = el.contentWindow.document.body
    ctx.appendChild(scriptEl)
  }
}
</script>

<style lang="scss" scoped>
.red {
  color: pink;
}
</style>
